<template>
  <div class="whq-root">
    <div class="whq-type">
      <div @click="itemClick(item)" :class="['w-item',getStateClass(item.state)]" v-for="(item,index) in ldata" :key="index">
        <div class="w-label">{{item.label}}</div>
        <div class="w-value">
          <div>
            <div v-if="item.state == 'ready'">{{item.date}}</div>
          </div>
        </div>
      </div>
    </div>


    <div class="whq-pics" v-if="currentViewData!=null">
      <div class="detail-body">

        <div class="pic-item" @click="bigPic(getPicUrl + currentViewData.pic1[0].fileName)">
          <el-image
            style="width: 200px; height: 100px"
            :src="getPicUrl + currentViewData.pic1[0].fileName"
            fit="contain"></el-image>
        </div>
        <div class="label-item">
          单株
        </div>
      </div>
      <div class="detail-body">
        <div class="pic-item" @click="bigPic(getPicUrl + currentViewData.pic2[0].fileName)">
          <el-image
            style="width: 200px; height: 100px"
            :src="getPicUrl + currentViewData.pic2[0].fileName"
            fit="contain"></el-image>
        </div>
        <div class="label-item">
          成片
        </div>
      </div>

    </div>


    <lark-card border :x="300" :y="100" body-height="500px" :body-width="'500px'" v-if="editDataVisible" :hidden="!editDataVisible"
               @closeAction="editDataVisible = !editDataVisible"
               :card-title="`编辑${formTitle}信息`" draggable
               :radius="false">

      <div class="edit-whq">
        <div class="edit-whq-form">
          <el-scrollbar>
            <div class="edit-whq-container">
              <el-form :ref="formRef" :model="formFiled" label-width="100px" :rules="rules">
                <el-form-item label="日期" prop="date">
                  <el-date-picker
                    size="mini"
                    v-model="formFiled.date"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="单株" prop="pic1">
                  <upload-image :limit="1" v-model="formFiled.pic1"></upload-image>
                </el-form-item>
                <el-form-item label="成片" prop="pic2">
                  <upload-image :limit="1" v-model="formFiled.pic2"></upload-image>
                </el-form-item>
              </el-form>
            </div>
          </el-scrollbar>
        </div>
        <div class="edit-whq-footer">
          <el-button :loading="submitBtnLoading" @click="submit" round>确定</el-button>
        </div>
      </div>
    </lark-card>

  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import { larkViewer } from 'lark-common'
  import { MathUtil } from 'lark-utils'
  import { phaseList, phaseEdit } from '@/api/industry/cpf'
  import { Message } from 'element-ui'
  import uploadImage from '@/components/UploadImage'
  import { getPicUrl } from '@/api/industry/file'

  export default {
    name: 'whq',
    components: {
      uploadImage
    },
    props: {
      mid: {
        type: [String, Number],
        default: null
      }
    },
    setup(props, content) {
      const ldata = [
        { index: 0, label: '出苗期', prop: 'periodEmergenceDate' },
        { index: 1, label: '分叶期', prop: 'leafletDate' },
        { index: 2, label: '拔节期', prop: 'elongatingDate' },
        { index: 3, label: '抽穗期', prop: 'headingDate' },
        { index: 4, label: '开花期', prop: 'floweringDate' },
        { index: 5, label: '成熟期', prop: 'matureDate' }
      ]
      let data = reactive({
        getPicUrl: getPicUrl + '/',
        editDataVisible: false,
        rules: {},
        submitBtnLoading: false,
        currentViewData: null,
        formRef: `formRef${MathUtil.guid()}`,
        formTitle: '',
        formFiled: {
          currentData: null,
          date: null,
          pic1: [],
          pic2: []
        },
        ldata: [],
        swiperOptions: {
          slidesPerView: 4,
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        }
      })

      const findPic = (responsePhotos, type) => {
        return responsePhotos.find(el => el.type == type)
      }

      const itemClick = (item) => {
        if (item.state == 'disabled') {
          Message.warning('暂不可编辑')
          return
        }
        if (item.state == 'ready') {
          data.currentViewData = item
          return
        }
        if (item.state == 'canEdit') {
          data.formFiled = {
            currentData: null,
            date: null,
            pic1: [],
            pic2: []
          }
          data.formTitle = item.label
          data.formFiled.currentData = item
          data.editDataVisible = true
        }

      }

      const loadData = async() => {

        let response = await phaseList({ filId: props.mid })
        if (response.rows.length == 0) {
          data.ldata = ldata.map(el => {
            if (el.index == 0) {
              el.state = 'canEdit'
            } else {
              el.state = 'disabled'
            }
            return el
          })
        } else {
          let res = response.rows[0]
          data.ldata = ldata.map(el => {
            if (res[el.prop] == null) {
              if (el.index != 0) {
                if (ldata[el.index - 1].state == 'ready') {
                  el.state = 'canEdit'
                } else {
                  el.state = 'disabled'
                }
              }
            } else {
              el.date = res[el.prop]
              let pic1 = findPic(res.photos, el.index + 1)
              el.pic1 = [{ fileName: pic1.fileName, path: pic1.path }]
              let pic2 = findPic(res.photos, el.index + 2)
              el.pic2 = [{ fileName: pic2.fileName, path: pic2.path }]
              el.state = 'ready'
            }
            return el
          })
        }
      }

      const resetFormData = () => {
        data.formFiled = {
          currentData: null,
          date: null,
          pic1: [],
          pic2: []
        }
      }
      const submit = async() => {
        try {
          content.refs[`${data.formRef}`].validate(async valid => {
            if (valid) {
              let requestData = {
                [data.formFiled.currentData.prop]: data.formFiled.date,
                photos: [{ type: (data.formFiled.currentData.index + 1) * 2 - 1, ...data.formFiled.pic1[0] },
                  { type: (data.formFiled.currentData.index + 1) * 2, ...data.formFiled.pic2[0] }]
              }
              data.submitBtnLoading = true
              await phaseEdit({ filId: props.mid, ...requestData })
              Message.success('操作成功')
              loadData()
              data.editDataVisible = false
            }
          })
        } finally {
          data.submitBtnLoading = false
        }
      }
      const getStateClass = (state) => {
        if (state == 'ready') {
          return 'ready-item'
        }
        if (state == 'disabled') {
          return 'disabled-item'
        }
        if (state == 'canEdit') {
          return 'can-edit-item'
        }
      }

      const bigPic = (src) => {
        larkViewer([{ src }])
      }
      onMounted(() => {
        loadData()
      })
      return { ...toRefs(data), bigPic, getStateClass, resetFormData, submit, itemClick }
    }
  }
</script>

<style scoped lang="scss">
  $w-item-height: 41px;
  .whq-root {
    .whq-type {
      display: flex;
      justify-content: space-around;

      .w-item {
        text-align: center;
        width: 15%;
        height: $w-item-height;
        border: 1px dashed #cccccc;

      }

      .ready-item {
        border: 2px dashed green;

        &:hover {
          border-style: solid;
          cursor: pointer;
        }
      }

      .can-edit-item {
        border: 1px dashed green;
        line-height: $w-item-height;

        &:hover {
          border-style: solid;
          cursor: pointer;
        }
      }


      .disabled-item {
        line-height: $w-item-height;
        color: #ccc;
        border: 1px dashed #cccccc;

        &:hover {
          border-style: dashed;
          cursor: not-allowed;
        }
      }

    }

    .whq-pics {
      padding: 20px 30px 10px 30px;
      display: flex;

      .detail-body {
        .pic-item {
          cursor: pointer;
        }

        .label-item {
          text-align: center;
        }
      }
    }

  }
</style>
<style lang="scss">
  .edit-whq {
    padding: 10px 5px;


    .edit-whq-form {
      .edit-whq-container {
        padding: 0px 10px;
      }

      height: calc(498px - 20px - 40px);
      padding-bottom: 10px;
    }

    .edit-whq-footer {
      height: 40px;
      text-align: right;
      margin-right: 10px;
      margin-top: 10px;
    }

  }
</style>
